<extend name="Public/base"/>
<block name="body">
	<extend name="Public/base"/>
	<block name="body">
		<link rel="stylesheet" href="/static/backend/css/report.css">
		<link rel="stylesheet"href="/static/backend/plugins/layui/css/modules/layer/default/layer.css"  media="all">
		<script src="__BACKEND_STATIC__/plugins/echarts/echarts.js"></script>
		<div class="page-crumb">
			<div class="ui-ctrl ui-crumb"><span class="ui-crumb-node ui-crumb-node-first ui-crumb-node-last">整体报告</span></div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<input class="layui-input" name="begin" placeholder="请选择开始时间" value="{$data.begin}" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
				</div>至
				<div class="layui-inline">
					<input class="layui-input" name="end" placeholder="请选择结束时间" value="{$data.end}" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
				</div>
				<button class="layui-btn layui-btn-min" lay-submit="" lay-filter="submit" id="ssss">　　确定　　</button>
			</div>


		</div>

		<div class="layui-main">
			<div class="report-view">
				<div class="report-general">
					<ul class="general-detail">
						<li class="general-detail-item general-detail-item-view">
							<p class="general-detail-item-base">
								<span class="general-detail-item-data" id="view"></span>
							</p>
							<p class="general-detail-item-name">展现量</p>
						</li>

						<li class="general-detail-item general-detail-item-click">
							<p class="general-detail-item-base">
								<span class="general-detail-item-data" id="click"></span>
							</p>
							<p class="general-detail-item-name">点击量</p>
						</li>

						<li class="general-detail-item general-detail-item-click-ratio">
							<p class="general-detail-item-base">
								<span class="general-detail-item-data" id="click_rate_sum"></span>
							</p>
							<p class="general-detail-item-name">点击率</p>
						</li>

					</ul>
					<div class="ui-ctrl ui-crumb"><span class="ui-crumb-node ui-crumb-node-first ui-crumb-node-last">趋势图</span>
					</div>
				</div>
			</div>
		</div>

		<div id="main" style="width: 1673px;height:300px;">

		</div>
		<table class="layui-table list-content-table" lay-skin="nob">
			<colgroup>
				<col width="20">
				<col width="200">
				<col width="150">
				<col width="200">
				<col width="200">
				<col width="150">
				<col width="150">

			</colgroup>
			<thead class="list-table-head">
			<tr>
				<th class="ui-table-hcell">
					<div class="ui-table-hcell-text ui-table-hcell-text-first">

					</div>
				</th>
				<th class="ui-table-hcell">
					<div class="ui-table-hcell-text">时间</div>
				</th>
				<th class="ui-table-hcell">
					<div class="ui-table-hcell-text">数据来源</div>
				</th>

				<th class="ui-table-hcell">
					<div class="ui-table-hcell-text">展现量</div>
				</th>
				<th class="ui-table-hcell">
					<div class="ui-table-hcell-text">点击量</div>
				</th>
				<th class="ui-table-hcell">
					<div class="ui-table-hcell-text">点击率</div>
				</th>
			</tr>
			</thead>

			<tbody class="list-table-body" id="each">

			</tbody>
		</table>

		<script>
            $(document).ready(function(){

                $.ajax({
                    type:"get",
                    url:'/Elastic/total_Statistics',
                    dataType:"json",
                    success: function(data){

                        if(data.status == '1') {
                            $("#view").text(data.data.total_view_sum);
                            $("#click").text(data.data.total_click_sum);
                            $("#click_rate_sum").text(data.data.total_click_rate_sum +='%' );

                            var str = '';
                            $.each(data.data.total_list,function(index,item){

                                    str += "<tr><td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>  </div></td>";
                                    str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.time + "</div></td>";
                                    str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>dsp</div></td>";
                                    str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.total_view + "</div></td>";
                                    str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.total_click + "</div></td>";
                                    str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.total_click_rate + "%</div></td></tr>";



                            });
                            $('#each').append(str);

                            showEchart(data.data);
                        } else {
                            console.log('没接收到返回数据');
                        }
                        return false;
                    }
                });
            });
            $("#ssss").click(function () {
                var begin =$(" input[ name='begin' ] ").val();
                var  end  =$(" input[ name='end' ] ").val();

                $.ajax({
                    type:"get",
                    url:'/Elastic/total_Statistics',
                    dataType:"json",
                    data:{'begin':begin,'end':end},
                    success: function(data){

                        if(data.status == '1') {

                            $("#view").text(data.data.total_view_sum);
                            $("#click").text(data.data.total_click_sum);
                            $("#click_rate_sum").text(data.data.total_click_rate_sum +='%');

                            var str = '';

                            $.each(data.data.total_list,function(index,item){
                                str += "<tr><td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>  </div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.time + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>dsp</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.total_view + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.total_click + "</div></td>";
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.total_click_rate + "%</div></td></tr>";

                            });

                            $('#each').empty();
                            $('#each').append(str);

                            showEchart(data.data);
                        } else {
                            console.log('没接收到返回数据');
                        }
                        return false;
                    }
                });
            });

            function showEchart(data) {

                var myChart = echarts.init(document.getElementById('main'));

                option = {

                    tooltip : {

                        trigger: 'axis'

                    },

                    legend: {

                        data:['展现量','点击量','点击率(%)']


                    },

                    toolbox: {

                        show : true,

                        feature : {

                            mark : {show: true},

                            dataView : {show: true, readOnly: false},

                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},

                            restore : {show: true},

                            saveAsImage : {show: true}

                        }

                    },

                    calculable : true,

                    xAxis : [

                        {

                            type : 'category',

                            boundaryGap : false,

                            data:data.time

                        }

                    ],

                    yAxis : [

                        {

                            type : 'value',
                            splitLine:{
                                show:false
                            }

                        }

                    ],

                    series : [

                        {

                            name:'展现量',

                            type:'line',

                            smooth:true,

                            itemStyle: {
                                normal: {
                                    color: '#40E0D0',
                                    borderColor: 'rgba(64,224,208,0.27)',
                                    borderWidth: 12

                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(64,224,208, 0.3)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(64,224,208, 0.3)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 10
                                }
                            },

                            data:data.total_view

                        },

                        {

                            name:'点击量',

                            type:'line',

                            smooth:true,

                            itemStyle: {
                                normal: {
                                    color: '#EE82EE',
                                    borderColor: 'rgba(238,130,238,0.27)',
                                    borderWidth: 12

                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(238, 130, 238, 0.3)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(238, 130, 238, 0.3)'
                                    }], false),
                                    shadowColor: 'rgba(238, 130, 238, 0.1)',
                                    shadowBlur: 10
                                }
                            },


                            data:data.total_click

                        },
                        {

                            name:'点击率(%)',

                            type:'line',

                            smooth:true,

                            itemStyle: {
                                normal: {
                                    color: '#FFD770',
                                    borderColor: 'rgba(255,215,0,0.27)',
                                    borderWidth: 12

                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(255,215,0, 0.3)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(255,215,0, 0.3)'
                                    }], false),
                                    shadowColor: 'rgba(255,215,0, 0.1)',
                                    shadowBlur: 10
                                }
                            },


                            data:data.total_click_rate

                        }

                    ]

                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
		</script>
	</block>
	<script src="__BACKEND_STATIC__/js/report/adPosition.js"></script>


	<div class="page-crumb">
		<div class="ui-ctrl ui-crumb"><span class="ui-crumb-node ui-crumb-node-first ui-crumb-node-last">整体报告</span></div>
	</div>

	<div class="layui-main">
		<div class="report-view">
			<div class="report-general">
				<ul class="general-detail">
					<li class="general-detail-item general-detail-item-view">
						<p class="general-detail-item-base">
							<span class="general-detail-item-data">{$report.view}</span>
						</p>
						<p class="general-detail-item-name">展现量</p>
					</li>
					
					<li class="general-detail-item general-detail-item-click">
						<p class="general-detail-item-base">
							<span class="general-detail-item-data">{$report.click}</span>
						</p>
						<p class="general-detail-item-name">点击量</p>
					</li>
					
					<li class="general-detail-item general-detail-item-click-ratio">
						<p class="general-detail-item-base">
							<span class="general-detail-item-data">{$ratio}%</span>
						</p>
						<p class="general-detail-item-name">点击率</p>
					</li>
					
				</ul>
			</div>
		</div>
	</div>
</block>